<div style="width:600px; height:550px; margin-left:30px; background-color:#fff;">
  <center><img src="<?php e($this->base) ?>/img/step2.png" style="margin-top:15px;" /></center>
  <div id="pages" style="width:560px; padding:15px 20px 20px;">
    <form id="form-payment" method="post" action="<?php e($this->base); ?>/pages/paymentMethod" onsubmit="return check();">
      <h3 style="margin-bottom:3px;"><?php __('Shipping Address'); ?></h3>
      <div style="border:1px solid #ccc; padding:10px; margin-bottom:20px;">
        <table cellpadding="3" cellspacing="0" border="0" align="center">
          <tr>
            <td>
              <label><?php __('Address'); ?>:</label>
              <div style="margin:1px 0 3px;"><textarea rows="4" cols="20" id="address" name="address" class="req" style="height:90px;"><?php e($data['Member']['address']); ?></textarea></div>
              <label><?php __('Post Code'); ?>:</label>
              <div style="margin:1px 0 18px;"><input type="text" id="postcode" name="postcode" value="<?php e($data['Member']['postcode']); ?>" class="input req" style="width:179px;" /></div>
            </td>
            <td width="60">&nbsp;</td>
            <td>
              <label><?php __('City'); ?>:</label>
              <div style="margin:1px 0 18px;"><input type="text" id="city" name="city" value="<?php e($data['Member']['city']); ?>" class="input req" style="width:179px;" /></div>
              <label><?php __('Country'); ?>:</label>
              <div style="margin:1px 0 18px;">
                <select id="country" name="country" class="select req" style="width:185px;">
                  <option value=""></option>
<?php foreach ($country as $c) {
          $selected = ($data['Member']['country'] == $c)?' selected':''; ?>
                  <option value="<?php e($c); ?>"<?php e($selected); ?>><?php e($c); ?></option>
<?php } ?>
                </select>
              </div>
              <label><?php __('Region / State'); ?>:</label>
              <div style="margin:1px 0 18px;"><input type="text" id="state" name="state" value="<?php e($data['Member']['state']); ?>" class="input req" style="width:179px;" /></div>
            </td>
          </tr>
        </table>
      </div>

      <h3 style="margin-bottom:3px;"><?php __('Add Comments About Your Order'); ?></h3>
      <div style="border:1px solid #ccc; padding:10px;">
        <div style="margin:1px 0 3px; text-align:center;">
          <textarea rows="5" cols="53" id="comment" name="comment" style="width:443px;"><?php e(isset($data['Member']['comment'])?$data['Member']['comment']:''); ?></textarea>
        </div>
      </div>
      <div class="clear"></div>
      <div class="fLeft"><input type="button" value="<?php __('Back'); ?>" style="margin-top:20px; display:block;" onclick="history.go(-1);" /></div>
      <div class="fRight">
        <input type="submit" value="<?php __('Next Step'); ?>" style="margin-top:20px; display:block;" />
      </div>
      <div class="clear"></div>
    </form>
  </div>
</div>

<script type="text/javascript">
var _webroot = '<?php e($this->base); ?>';
function check () {
    var message = Ext.get('message');
    var focuson = '';

    if (validation('form-payment') == false) {
        message.update('Please enter required information.');
        message.addClass('error').highlight();
        return false;
    }

    return true;
} // check

function clearForm () {
    Ext.each(Ext.query('input[type=text], input[type=password], input[type=hidden], textarea', 'form-payment'), function(e){
        e.value = '';
    });
} // clearForm

function cleanError (form) {
    Ext.fly('message').setStyle({ display:'none' }).removeClass('error');
    Ext.select('.invalid', false, form).removeClass('invalid');
    Ext.select('div.invalidField', false, form).remove();
    Ext.select('.invalidText', false, form).removeClass('invalidText');
} // cleanError

function validation (form) {
    var proceed = true;
    var focuson = '';

    cleanError(form);
    Ext.each(Ext.select('.req', false, form).elements, function(e){
        var el = Ext.get(e);

        if (!el.getValue() || el.getValue() == 'select..') {
            proceed = false;
            el.addClass('invalid');
            el.up('div').prev('label').addClass('invalidText');

            if (!focuson) {
                focuson = e.id;
                el.focus();
                el.fadeIn({
                    duration: 2.0
                });
            }
        }
    });

    return proceed;
} // validation

function errorFields (error) {
    var focuson = '';

    Ext.each(error, function(e) {
        var el  = Ext.get(e.id);
        var err = '<div class="invalidField" style="display:none;">'+e.code+'</div>';
            el.addClass('invalid');
            el.up('div').prev('label').addClass('invalidText');
            el.insertHtml('afterEnd', err);
            el.next('div.invalidField').slideIn('t', {
                duration:.4
            });
            if (e.clear) {
                el.dom.value = '';
            }
            if (!focuson) {
                focuson = e.id;
                el.focus();
                el.fadeIn({
                    duration: 2.0
                });
            }
    });
} // errorFields
</script>